<template>
    <div class="list">
        新品首发及人气推荐页面
        <div class="tab" @click="tabEvents">
            <div :class="current != 'default' ? 'active' : ''">
                价格
            </div>
          
            <div class="iconBox">
                <van-icon :color="current == 'up' ? '#deb12a' :''" name="arrow-up" />
                <van-icon :color="current == 'down' ? '#deb12a' :''" name="arrow-down" />
            </div>
           
        </div>
        <div>
            <ul>
                <li v-for="item in list" :key="item.id">
                    <img :src="item.list_pic_url" alt="">
                    <h2>{{ item.name  }}</h2>
                    <p>￥：{{ item.retail_price }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {
    goodsList
} from "@/api/home/list"
export default {
    data() {
        return {
            list:[],
            id:"",
            current:"default" // default up down
        };
    },
    computed: {

    },
    created() {
        // console.log(this.$route.query.id);
        var id = this.$route.query.id;
        this.id =  this.$route.query.id;
        // if(this.$route.query.id == 1){
        //     console.log("新品首发")
        // }else{
        //     console.log("人气推荐")
        // }
        goodsList({
            isHot:id == 2 ? 1 : '',
            isNew:id == 1 ? 1 : '',
            order:""
        })
        .then(res =>{
            console.log(res)
            this.list = res.data
        })
    },
    mounted() {

    },
    methods: {
        tabEvents(){
            if(this.current == "default"){
                this.current = "up"
            }else if(this.current =="up"){
                this.current = "down"
            }else{
                this.current = "up"
            }
            goodsList({
                isHot:this.id == 2 ? 1 : '',
                isNew:this.id == 1 ? 1 : '',
                order: this.current =="up" ? "asc" : "desc" 
            })
            .then(res =>{
                console.log(res)
                this.list = res.data
            })
        }
    },
};
</script>

<style scoped lang="scss">
.list{
    .tab{
        display: flex;
        align-items: center;
        justify-content: center;
        .iconBox{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .active{
            color: #deb12a;
        }
    }
    ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            width: 49%;
            img{
                width: 100%;
            }
        }
    }
}
</style>
